<template>
  <div class="chart-box" :class="'bg_' + type">
    <div class="top">
      <img v-if="type === 'cpu'" src="./image/cpu.svg">
      <img v-if="type === 'memory'" src="./image/memory.svg" />
      <img v-if="type === 'average'" src="./image/average.svg" />
      <!-- <img v-if="type === 'phyMemory'" src="./image/phyMemory.svg" /> -->
      <img v-if="type === 'phy'" src="./image/phyMemory.svg" />
      <img v-if="type === 'server'" src="./image/server.svg" />
      <span class="sp">{{ title }}</span>
      <span v-if="type === 'server'">
        <el-tooltip class="item" effect="dark" :content="tips[serverStatus]" placement="top">
          <i class="el-icon-warning text-primary"></i>
        </el-tooltip>
        <!-- <img src="./image/tip.svg" style="margin-top: -3px;"> -->
      </span>
    </div>
    <div v-if="type==='server'" class="middle">
      <!-- <div class="middle-text">
        <span class="num" v-if="type === 'cpu'|| type==='memory' || type==='average'">{{ percentage }}%</span>
        <span class="num" v-else-if="type==='phyMemory'">{{ storage }}</span>
        <span v-else class="status" :class="{ error: serverStatus === 1, busy: serverStatus === 2 }">
          <span v-if="serverStatus === 0">正常</span>
          <span v-if="serverStatus === 1">异常</span>
          <span v-if="serverStatus === 2">繁忙</span>
        </span>
      </div> -->
      <div class="middle-text">
        <span class="status" :class="{ error: serverStatus === 1, busy: serverStatus === 2 }">
          <span v-if="serverStatus === 0">正常</span>
          <span v-if="serverStatus === 1">异常</span>
          <span v-if="serverStatus === 2">繁忙</span>
        </span>
      </div>
    </div>
    <div v-if="type !== 'server' && type!=='phyMemory'" class="bottom">
      <div class="bottom-text">
        <span>{{ type !== "phyMemory" ? "已使用" : "可用率" }}</span>
        <span class="num">{{ percentage }}%</span>
      </div>
      <el-progress
        :percentage="percentage"
        :show-text="false"
        :status="status"
      ></el-progress>
    </div>
  </div>
</template>

  <script>
  export default {
    props: {
      title: String,
      type: String,
      serverStatus: {
        type: Number,
        default: 0
      },
      percentage: {
        type: [Number],
        default: 0
      },
      storage: {
        type: Number
      }
    },
    data () {
      return {
        tips: ['服务器正常状态', '服务器异常状态（cpu负载过高、可用内存不足等）', 'worker节点繁忙（任务太多了，来不及处理）']
      }
    },
    computed: {
      status () {
        let text = ''
        if (this.percentage < 80) {
          text = ''
        } else if (this.percentage < 90) {
          text = 'warning'
        } else {
          text = 'exception'
        }
        return text
      }
    }
  }
  </script>

<style lang="scss" scoped>
.chart-box {
  height: 100px;
  background: #ffffff;
  border: 1px solid rgba(51, 49, 126, 0.19);
  border-radius: 8px;
  padding: 10px 20px;
  &.bg_cpu {
    background: #ffffff url("./image/cpu-BG.png") top right no-repeat;
    background-size: 100% 100%;
  }
  &.bg_memory {
    background: #ffffff url("./image/memory-BG.png") top right no-repeat;
    background-size: 100% 100%;
  }
  &.bg_average {
    background: #ffffff url("./image/average-BG.png") top right no-repeat;
    background-size: 100% 100%;
  }
  // &.bg_phyMemory {
  //   background: #ffffff url("./image/phyMemory-BG.png") top right no-repeat;
  // }
  &.bg_phy {
    background: #ffffff url("./image/phy-BG.png") top right no-repeat;
    background-size: 100% 100%;
  }
  &.bg_server {
    background: #ffffff url("./image/server-BG.png") top right no-repeat;
    background-size: 100% 100%;
  }
  .top {
    position: relative;
    padding-top: 5px;
    img{
      width: 16px;
      height: 16px;
      margin-top: -4px;
    }
    span {
      font-size: 16px;
      margin-left: 2px;
      color: #333;
      width: 96px;
      height: 20px;
      font-family: PingFang SC, PingFang SC-Medium;
      font-weight: 500;
      text-align: LEFT;
      line-height: 20px;
    }
  }
    .middle {
    display: flex;
    flex-direction: row;
    align-items: center;
    line-height: 1;
    margin: 10px auto;
    .middle-text {
      // margin-left: 25px;
      margin: 0 auto;
      span {
        // display: block;
        font-size: 60px;
        font-weight: 900;
        &.sp {
          margin-left: 5px;
        }
      }
    }
    .num {
      font-family: Oxanium, Oxanium-Bold;
    }
    .status {
      span{
        display: block;
        font-size: 28px;
        font-family: PingFang HK, PingFang HK-Semibold;
        font-weight: 600;
      }
      color: #333333 !important;
      &.error {
        color: #f7564e !important;
      }
      &.busy{
        color:#F27011 !important;
      }
    }
  }
  .bottom{
    .bottom-text {
      display: flex;
      justify-content: space-between;
      align-items: center;
      // margin-top: 20px;
      margin-top: 2px;
      .num{
        height: 40px;
        font-size: 29px;
        font-family: Oxanium,Oxanium-Bold;
        font-weight: 600;
        text-align: RIGHT;
        color: #333;
        line-height: 30px;
      }
    }
  }

}
</style>
